import { Modal, Row, Space, Divider, Input, Button, message, Select } from "ant-design-vue";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons-vue";
import { randomId } from "@/utils/common";
import { useVModels } from "@vueuse/core";
type PublishApiModalComponentType = {
    showOrUpdatePublishObj: PutPublishApiParmas | null;
    handleType: 1 | 2 | 3;
    visible: boolean;
};
export const PublishApiModalComponent = defineComponent({
    props: ["showOrUpdatePublishObj", "visible", "handleType"],
    emits: ["update:visible", "ok"],
    setup(props: PublishApiModalComponentType, { emit }) {
        const { visible } = useVModels(props, emit);
        const addPublishObj = ref<PostPublishApiParmas>({
            field_data: [],
            name: "",
            api_path: ""
        });
        // 1 为查看 2为修改 3 为添加
        // const handleType = ref(1); // 1 | 2 | 3
        const handleType = computed(() => props.handleType);
        const isInputDisabled = computed(() => props.handleType === 1);
        const isShowAddAndRemove = computed(() => !isInputDisabled.value);
        const showOrUpdatePublishObj = computed(() => (handleType.value === 3 ? null : props.showOrUpdatePublishObj));

        const fieldData = computed(() => {
            return handleType.value === 3
                ? addPublishObj.value.field_data
                : showOrUpdatePublishObj.value && showOrUpdatePublishObj.value.field_data;
        });
        // 添加字段项
        const addFieldDataItem = () => {
            fieldData.value &&
                fieldData.value.push({
                    id: randomId(),
                    label: "",
                    value: "",
                    type: "index"
                });
        };
        const modalOk = () => {
            if (fieldData.value) {
                for (const item of fieldData.value) {
                    if (Object.values(item).filter(Boolean).length !== 4) {
                        message.error("请填写完整!");
                        return;
                    }
                }
            }
            if (handleType.value === 3) {
                const obj: PostPublishApiParmas = JSON.parse(JSON.stringify(addPublishObj.value));
                addPublishObj.value = {
                    field_data: [],
                    name: "",
                    api_path: ""
                };
                if (!obj.name || !obj.name) {
                    message.error("请填写完整!");
                    return;
                }
                emit("ok", obj);
            } else if (handleType.value === 2) {
                if (!showOrUpdatePublishObj.value || !showOrUpdatePublishObj.value.name || !showOrUpdatePublishObj.value.name) {
                    message.error("请填写完整!");
                    return;
                }
                emit("ok");
            }
            visible.value = false;
        };
        // 删除字段项
        const removeFieldDataItem = (index: number) => {
            fieldData.value && fieldData.value.splice(index, 1);
        };
        // 接口字段类型
        const apiFieldOptions = [
            {
                label: "ES索引字段",
                value: "index"
            },
            {
                label: "自填",
                value: "custom"
            }
        ];
        return () => (
            <>
                <Modal title="添加发布接口" v-model:open={visible.value} style="width: 500px" onOk={modalOk}>
                    <Row>
                        <Space>
                            {handleType.value === 3 ? (
                                <>
                                    <Input
                                        placeholder="输入接口名称"
                                        v-model:value={addPublishObj.value.name}
                                        style="width: 200px"
                                    ></Input>
                                    <Input
                                        placeholder="输入接口URL"
                                        v-model:value={addPublishObj.value.api_path}
                                        style="width: 200px"
                                    ></Input>
                                </>
                            ) : showOrUpdatePublishObj.value ? (
                                <>
                                    <Input
                                        placeholder="输入接口名称"
                                        v-model:value={showOrUpdatePublishObj.value.name}
                                        style="width: 200px"
                                        disabled={isInputDisabled.value}
                                    ></Input>
                                    <Input
                                        placeholder="输入接口URL"
                                        v-model:value={showOrUpdatePublishObj.value.api_path}
                                        style="width: 220px"
                                        disabled={isInputDisabled.value}
                                    ></Input>
                                </>
                            ) : (
                                <span></span>
                            )}
                        </Space>
                        <Divider>接口字段</Divider>
                        {fieldData.value &&
                            fieldData.value.map((item, index) => {
                                return (
                                    <Space style="margin-bottom: 10px" align="center" size={10} key={item.id}>
                                        <Input
                                            placeholder="输入字段描述"
                                            disabled={isInputDisabled.value}
                                            v-model:value={item.label}
                                            style="width: 140px"
                                        ></Input>
                                        <Input
                                            placeholder="输入字段名"
                                            disabled={isInputDisabled.value}
                                            v-model:value={item.value}
                                            style="width: 140px"
                                        ></Input>
                                        <Select
                                            placeholder="选择字段类型"
                                            options={apiFieldOptions}
                                            disabled={isInputDisabled.value}
                                            v-model:value={item.type}
                                            style="width: 120px"
                                        ></Select>
                                        <MinusCircleOutlined
                                            v-show={isShowAddAndRemove.value}
                                            style="font-size: 22px"
                                            onClick={() => removeFieldDataItem(index)}
                                        />
                                    </Space>
                                );
                            })}
                        <Button type="dashed" v-show={isShowAddAndRemove.value} style="width: 100%" onClick={addFieldDataItem}>
                            <PlusOutlined />
                            添加项
                        </Button>
                    </Row>
                </Modal>
            </>
        );
    }
});
